$spacing-types:(m:margin,p:padding);
$spacing-sizes:(0:0, 1:1, 2:2, 3:3, 4:4, 5:5);
$spacing-directions:(t:top,r:right,b:bottom,l:left);

@each $typeKey,$type in $spacing-types {  //循环内外边距类名
 @each $sizeKey,$size in $spacing-sizes{ //m-1
	.#{$typeKey}-#{$sizeKey}{
		#{$type}:$size * 10rpx;
	}
 }
 //.mx-1,.my-1
   @each $sizeKey,$size in $spacing-sizes {
     .#{$typeKey}x-#{$sizeKey}{
       #{$type}-left:$size * 10rpx;
       #{$type}-right:$size * 10rpx;
     }
     .#{$typeKey}y-#{$sizeKey}{
       #{$type}-top:$size * 10rpx;
       #{$type}-bottom:$size * 10rpx;
     }
   }
 //.mt-1
 @each $directionKey,$directon in $spacing-directions {
   @each $sizeKey,$size in $spacing-sizes {
     .#{$typeKey}#{$directionKey}-#{$sizeKey}{
       #{$type}-#{$directon}:$size * 10rpx;
     }
   }
 }
}
.mx-auto{
	margin-left: auto;
	margin-right: auto;
}


.d-flex{
  display: flex;
}
.flex-center{
	display: flex;
	justify-content: center;
	align-items: center;
}
$flex-jc:(
  start:flex-start,
  end:flex-end,
  center:center,
  between:space-between,
  around:space-around
);
@each $key,$value in $flex-jc {
  .jc-#{$key}{
    justify-content: $value;
  }
}

.flex-column{
  flex-direction: column;
}

$flex-ai:(
  start:flex-start,
  end:flex-end,
  center:center,
  stretch:stretch
);
@each $key,$value in $flex-ai {
  .ai-#{$key}{
    align-items: $value;
  }
}

$flex-ac:(
  start:flex-start,
  end:flex-end,
  center:center,
  between:space-between,
  around:space-around
);
@each $key,$value in $flex-ac {
  .ac-#{$key}{
    align-content: $value;
  }
}
